<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title></title>
    <meta name="renderer" content="webkit">
    <meta name="author" content="中文Lee 360811363@qq.com">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="author" content="lizhongwen@lizhongwen.com">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <link rel="stylesheet" href="../../../lib/layui-v2.6.3/css/layui.css" media="all">
    <link rel="stylesheet" href="../../../css/public.css" media="all">

    <link rel="stylesheet" href="../../../lib/ext/css/bootstrapStyle/bootstrapStyle.css" type="text/css">
    <script type="text/javascript" src="../../../lib/ext/js/jquery-1.4.4.min.js"></script>
    <script type="text/javascript" src="../../../lib/ext/js/jquery.ztree.core.js"></script>
    <script type="text/javascript" src="../../../lib/ext/js/jquery.ztree.excheck.js"></script>
    <script type="text/javascript" src="../../../lib/ext/js/jquery.ztree.exedit.js"></script>
    <!--
    * [LupMisNotAllowedSync]
    * 本代码为系统自动生成代码，请根据自己业务进行修改;
    * 生成时间 2022-02-15 18:29:17;
    * 版权所有 2020-2022 lizhongwen，并保留所有权利;
    * 说明: 这不是一个自由软件！您只能在不用于商业目的的前提下对程序代码进行修改和使用；不允许对程序代码以任何形式任何目的的再发布;
    * 作者: 中文Lee;
    * 作者主页: http://www.lizhongwen.com;
    * 邮箱: 360811363@qq.com;
    * QQ: 360811363;
    -->
    <style type="text/css">
        .node_name input {
            padding: 5px;
        }
        
        .ztree li span {
            max-width: 240px;
        }
        
        .layui-form-select input {
            padding-left: 20px;
        }
        
        .multi dl dd.layui-this {
            background-color: #fff
        }
    </style>
</head>

<body style="overflow-y:hidden">
    <div class="layui-card layui-anim">

        <div class="layui-card-body">
            <form class="layui-form" action="#" onsubmit="return false">
                <div class="layui-row">
                    <button type="button" class="layui-btn layui-btn-sm" onclick="createNewNodes(null,0)">新建</button>
                    <button type="button" class="layui-btn layui-btn-warm layui-btn-sm" onclick="treeDemoObj.expandAll(true)">展开</button>
                    <button type="button" class="layui-btn layui-btn-danger layui-btn-sm" onclick="treeDemoObj.expandAll(false)">收缩</button>

                    <button type="button" class="layui-btn layui-btn-sm" style="background:green" onclick="zTreeMoveNode('prev')">上移</button>
                    <button type="button" class="layui-btn layui-btn-sm" style="background:#1e9fff" onclick="zTreeMoveNode('next')">下移</button>

                    <button type="button" class="layui-btn layui-btn-danger layui-btn-sm" id="currentName" style="background:#999;float:right">未选目录</button>
                </div>
                <div class="layui-row">
                    <hr>
                </div>
                <div class="layui-row  layui-form-item" style="display: -webkit-flex;display: flex;">
                    <!-- 左侧区域start -->
                    <div class="scroll-box" style="text-align: left;overflow-y:scroll;min-width:380px;width:auto;max-width:600px;display: -webkit-flex;display: flex;" id="left">
                        <div id="treeDemo" class="ztree">

                        </div>
                    </div>
                    <!-- 左侧区域end -->
                    <!-- 右侧区域start -->
                    <div class="scroll-box" id="right" style="border-left: solid 0px #ededed;overflow-y:auto;padding-right:20px;padding-left:20px;flex:1;">
                        <input type="hidden" name="pid" value="0">

                        <div class="layui-form-item">
                            <label class="layui-form-label">目录ID</label>
                            <div class="layui-input-block">
                                <input type="text" name="id" readonly style="background-color: #f2f2f2;" autocomplete="off" class="layui-input">
                            </div>
                        </div>

                        <div class="layui-form-item">
                            <label class="layui-form-label">目录名称</label>
                            <div class="layui-input-block">
                                <input type="text" name="name" lay-verify="required" lay-reqtext="请输入目录名称" placeholder="请输入目录名称" autocomplete="off" class="layui-input">
                            </div>
                        </div>



                        <div class="layui-form-item">
                            <label class="layui-form-label">目录别名</label>
                            <div class="layui-input-block">
                                <input type="text" name="alias_name" autocomplete="off" placeholder="请输入目录别名" class="layui-input">
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <label class="layui-form-label">目录编码</label>
                            <div class="layui-input-block">
                                <input type="text" name="code" value="" lay-verify="" lay-reqtext="请输入目录编码" placeholder="请输入目录编码" autocomplete="off" class="layui-input">
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <label class="layui-form-label">目录封面</label>
                            <div class="layui-input-block">
                                <input type="text" onclick="openUploadFileBox(this,'')" extra="" path="catalog" exts="gif|png|jpg|jpeg|bmp" name="file_url" lay-verType="msg" placeholder="请上传目录封面" autocomplete="off" class="layui-input upload">
                            </div>
                        </div>


                        <div class="layui-form-item">
                            <label class="layui-form-label">目录状态</label>
                            <div class="layui-input-block">
                                <input type="checkbox" name="status" checked lay-skin="switch" lay-text="ON|OFF" lay-filter="status">
                            </div>
                        </div>

                        <div class="layui-form-item">
                            <label class="layui-form-label">目录排序</label>
                            <div class="layui-input-block">
                                <input type="number" name="sort" value="255" lay-verify="required|number" lay-reqtext="请输入排序" placeholder="请输入排序" autocomplete="off" class="layui-input">
                            </div>
                        </div>
                        <div class="layui-col-lg12  layui-form-text">
                            <div class="layui-form-item">
                                <label class="layui-form-label">描述</label>
                                <div class="layui-input-block">
                                    <textarea name="remarks" placeholder='请输入描述' autocomplete="off" class="layui-textarea"></textarea>
                                </div>
                            </div>
                        </div>

                        <div class="layui-form-item">
                            <div class="layui-input-block">
                                <button class="layui-btn" lay-submit="" onclick="saveData()">提交</button>
                            </div>
                        </div>

                    </div>
                    <!-- 右侧区域end -->
                </div>
            </form>
        </div>
    </div>
    <script src="../../../js/run.js"></script>
    <script type="text/javascript">
        var showRenameBtn = true;
        var showRemoveBtn = true;
        //这里引用一下，否则不生效
        $(document).ajaxSend(function(event, jqxhr, settings) {
            jqxhr.setRequestHeader("accessuid", localStorage.getItem("accessuid"));
            jqxhr.setRequestHeader("accesstoken", localStorage.getItem("accesstoken"));
        });
        $(function() {
            layui.$.ajaxSetup({
                complete: function(xhr, status) {
                    layui.layer.closeAll('loading');
                    setTimeout(function() {
                        layui.layer.closeAll('loading');
                    }, 100);
                    var ret = JSON.parse(xhr.responseText);
                    if (ret.code == 401) {
                        localStorage.setItem("accesstoken", '');
                        localStorage.setItem("accessuid", '');
                        window.location.href = project_path + "login.html";
                    } else if (ret.code == 403) {
                        layer.msg(ret.msg);
                        return false;
                    }
                }
            });
        });
        var setting = {
            async: {
                enable: true,
                contentType: "application/json;charset=utf-8",
                headers: {
                    'accessuid': localStorage.getItem("accessuid"),
                    'accesstoken': localStorage.getItem("accesstoken")
                },
                type: "post",
                dataType: "json",
                autoParam: ["id", "name"],
                url: base_gateway + "sys/catalog/lists",
                dataFilter: filter
            },
            view: {
                expandSpeed: "1",
                addHoverDom: addHoverDom,
                removeHoverDom: removeHoverDom,
                showLine: true,
                showIcon: true,
                showTitle: true,
                selectedMulti: false
            },
            edit: {
                drag: {
                    prev: false,
                    inner: false,
                    next: false
                },
                enable: true,
                showRenameBtn: showRenameBtn,
                showRemoveBtn: showRemoveBtn
            },
            data: {
                simpleData: {
                    enable: true
                }
            },
            callback: {
                beforeRemove: beforeRemove,
                beforeRename: beforeRename,
                beforeDrop: beforeDrop,
                beforeClick: beforeClick,
                onClick: onClick,
                onAsyncSuccess: zTreeOnAsyncSuccess, // 异步加载正常结束的事件回调函数
            }
        };
        //节点移动
        function zTreeMoveNode(moveType) {
            var treeObj = $.fn.zTree.getZTreeObj("treeDemo");
            var treeNode = treeObj.getSelectedNodes();
            if (treeNode.length == 0) {
                layer.msg("请选择要移动的节点");
                return false;
            }
            if (moveType == 'prev') {
                if (treeNode.length > 0) {
                    var targetNode = treeNode[0].getPreNode();
                }
            } else {
                if (treeNode.length > 0) {
                    var targetNode = treeNode[0].getNextNode();
                }
            }
            if (targetNode == null || targetNode == "" || targetNode == "null") {
                layer.msg("不能再移动啦！");
                return false;
            }
            var isSilent = false;

            var loading = layer.load(2, {
                shade: [0.1, '#393D49'],
            });
            var data = {
                id: treeNode[0].id,
                target_id: targetNode.id,
                move_type: moveType
            };
            request(base_gateway + "sys/catalog/move", data, function(ret) {
                layer.close(loading);
                if (ret.code == 200) {
                    treeObj.moveNode(targetNode, treeNode[0], moveType, isSilent);
                    onClick(null, treeNode[0].id, treeNode[0], '');
                } else {
                    layer.msg(ret.msg);
                }
            });


        }
        //用于捕获异步加载正常结束的事件回调函数
        function zTreeOnAsyncSuccess(event, treeId, treeNode, msg) {

            var ret = msg;
            if (ret.code == 401) {
                localStorage.setItem("accesstoken", null);
                localStorage.setItem("accessuid", null);
                layer.alert(ret.msg, {
                    icon: 1,
                    closeBtn: 0
                }, function(index) {
                    //关闭弹窗
                    layer.close(index);
                    window.location.href = project_path + "login.html";
                });
            } else if (ret.code == 403) {
                layer.msg(ret.msg);
                return false;
            }

            var treeObj = $.fn.zTree.getZTreeObj(treeId);
            var nodes = treeObj.getNodes();

            //默认展开前3个
            // treeObj.expandAll(true);
            // for (var i = 0; i < nodes.length; i++) {
            //     // treeObj.expandNode(nodes[i], true, false, false); //默认展开第一级节点
            // }


        }
        var confirmVal = false;
        //仅亲兄弟节点间可拖动
        function beforeDrop(treeId, treeNodes, targetNode, moveType) {


            return false;
        }

        function filter(treeId, parentNode, childNodes) {
            childNodes = childNodes.data || childNodes;
            if (!childNodes) return null;
            for (var i = 0, l = childNodes.length; i < l; i++) {
                childNodes[i].name = childNodes[i].name.replace(/\.n/g, '.');
                childNodes[i].pId = childNodes[i].pid;
                if (childNodes[i].pId == '0') {
                    childNodes[i].open = true;
                } else {
                    childNodes[i].open = false;
                }
            }
            return childNodes;
        }

        function beforeClick(treeId, treeNode, clickFlag) {
            onClick(null, treeId, treeNode, clickFlag);
        }
        //目录点击事件
        function onClick(event, treeId, treeNode, clickFlag) {
            var loading = layer.load(2, {
                shade: [0.1, '#393D49'],
            });
            //这里还是需要重新调用一下接口吧
            request(base_gateway + "sys/catalog/query", {
                id: treeNode.id
            }, function(ret) {
                layer.closeAll('loading');
                if (ret.code == 200) {
                    $("#currentName").text(ret.data.name);
                    $("#currentName").css("background-color", "#01c924");

                    $("input[name='pid']").val(ret.data.pid);
                    $("input[name='id']").val(ret.data.id);
                    $("input[name='name']").val(ret.data.name);
                    $("input[name='alias_name']").val(ret.data.alias_name);
                    $("input[name='code']").val(ret.data.code);
                    $("input[name='file_url']").val(ret.data.file_url);

                    $("#fileUrl").hide();

                    $("input[name='sort']").val(ret.data.sort);
                    $("textarea[name='remarks']").val(ret.data.remarks);

                    if (ret.data.status == 1) {
                        $("input[name='status']").attr("checked", true);
                    } else {
                        $("input[name='status']").removeAttr("checked");
                    }

                    // initDictData('edit');

                    // initDbTableData('edit');

                    // initTreeParent('edit');
                    // editor("content");
                    // initTreeParent('edit');
                    //初始化上传附件
                    initUploadFile();
                    //初始化日历
                    // initCalendar();

                    layui.form.render(null, null);
                } else {
                    layer.msg(ret.msg, {
                        shade: [0.1, '#393D49'],
                        time: 1500,
                        icon: 5
                    });
                }
            });

        }
        //删除目录
        function beforeRemove(treeId, treeNode) {
            var id = treeNode.id;
            var zTree = $.fn.zTree.getZTreeObj("treeDemo");
            zTree.selectNode(treeNode);
            layer.confirm('确定要删除该目录分类吗？', function(index) {
                request(base_gateway + "sys/catalog/del", {
                    id: treeNode.id
                }, function(ret) {
                    if (ret.code == 200) {
                        //将表单值置空
                        $("#currentName").text("未选择目录分类");
                        $("#currentName").css("background-color", "#999999");

                        $("input[name='pid']").val("");
                        $("input[name='id']").val("");
                        $("input[name='name']").val("");
                        $("input[name='alias_name']").val("");
                        $("input[name='code']").val("");
                        $("input[name='file_url']").val("");
                        $("#fileUrl").hide();
                        // $("input[name='sort']").val("");
                        $("textarea[name='remarks']").val("");

                        // if (ret.data.status == 1) {
                        //     $("input[name='status']").attr("checked", true);
                        // } else {
                        //     $("input[name='status']").removeAttr("checked");
                        // }
                        // initDictData('edit');
                        // initDbTableData('edit');
                        // initTreeParent('edit');
                        // editor("content");
                        // initTreeParent('edit');
                        //初始化上传附件
                        initUploadFile();
                        //初始化日历
                        // initCalendar();

                        layui.form.render(null, null);
                        layer.msg(ret.msg, {
                            shade: [0.1, '#393D49'],
                            time: 1500,
                            icon: 6
                        });
                        zTree.removeNode(zTree.getSelectedNodes()[0]);
                    } else {
                        layer.msg(ret.msg, {
                            shade: [0.1, '#393D49'],
                            time: 1500,
                            icon: 5
                        });
                    }
                    layer.close(index);
                });

            });
            return false;
        }

        //修改名称
        function beforeRename(treeId, treeNode, newName) {

            if (newName.length == 0) {
                var zTree = $.fn.zTree.getZTreeObj("treeDemo");
                zTree.cancelEditName();
                layer.msg('名称不能为空');
                return false;
            } else {

                request(base_gateway + "sys/catalog/editName", {
                    id: treeNode.id,
                    name: newName
                }, function(ret) {
                    onClick(null, treeId, treeNode, true);
                    //var zTree = $.fn.zTree.getZTreeObj("treeDemo");
                    //zTree.addNodes(treeNode, {id:ret.nodesId, pId:treeNode.id, name:ret.nodesName})
                });
                return true;
            }

        }

        function addHoverDom(treeId, treeNode) {
            // console.log(123);
            var sObj = $("#" + treeNode.tId + "_span");
            if (treeNode.editNameFlag || $("#addBtn_" + treeNode.tId).length > 0) return;
            var addStr = "<span class='button add' id='addBtn_" + treeNode.tId + "' title='add node' onfocus='this.blur();'></span>";
            sObj.after(addStr);
            var btn = $("#addBtn_" + treeNode.tId);
            if (btn) btn.bind("click", function() {
                createNewNodes(treeNode, treeNode.id);
            });
        };
        //创建新目录
        function createNewNodes(treeNode, pid) {
            //type = 0 开头创建，-1末尾创建
            layer.confirm('选择创建的位置？', {
                btn: ['开头创建', '末尾创建', '取消'],
                btn3: function(index, layero) {
                    layer.close(index);
                }
            }, function(index, layero) {
                //开头创建
                var position = 0;
                request(base_gateway + "sys/catalog/add", {
                    name: '(重命名目录)',
                    pid: pid,
                    position: position
                }, function(ret) {
                    if (ret.code == 200) {
                        var zTree = $.fn.zTree.getZTreeObj("treeDemo");
                        zTree.addNodes(treeNode, position, {
                            id: ret.data.id,
                            pId: ret.data.pid,
                            name: ret.data.name
                        });
                    } else {
                        layer.msg(ret.msg);
                    }
                    layer.close(index);
                });
                return false;
            }, function(index) {
                //末尾创建
                var position = -1;
                request(base_gateway + "sys/catalog/add", {
                    name: '(重命名目录)',
                    pid: pid,
                    position: position
                }, function(ret) {
                    if (ret.code == 200) {
                        var zTree = $.fn.zTree.getZTreeObj("treeDemo");
                        zTree.addNodes(treeNode, position, {
                            id: ret.data.id,
                            pId: ret.data.pid,
                            name: ret.data.name
                        });
                    } else {
                        layer.msg(ret.msg);
                    }
                    layer.close(index);
                });
                return false;
            });
            return false;
        }

        function removeHoverDom(treeId, treeNode) {
            $("#addBtn_" + treeNode.tId).unbind().remove();
        };
        var treeDemoObj;
        $(document).ready(function() {
            treeDemoObj = $.fn.zTree.init($("#treeDemo"), setting);
        });

        //保存数据
        function saveData() {
            var dataJson = formToJson($("form").serialize());
            if (dataJson.status && dataJson.status == 'on') {
                dataJson.status = 1;
            } else {
                dataJson.status = -1;
            }
            var id = $("input[name='id']").val();
            if (id == "0" || id == "") {
                layer.msg("请选择左侧目录（分类）", {
                    shade: [0.1, '#393D49'],
                    time: 1500,
                    icon: 5
                });
                return false;
            }
            request(base_gateway + "sys/catalog/edit", dataJson, function(ret) {
                if (ret.code == 200) {
                    layer.msg(ret.msg, {
                        shade: [0.1, '#393D49'],
                        time: 1500,
                        icon: 6
                    });
                } else {
                    layer.msg(ret.msg, {
                        shade: [0.1, '#393D49'],
                        time: 1500,
                        icon: 5
                    });
                }
            });
            return false;
        }

        $(function() {

            var windowH = $(window).height();
            if (windowH <= 300) {
                windowH = 300;
            }
            $("#right").css("height", (windowH - 80) + "px");
            $("#left").css("height", (windowH - 80) + "px");
            $("#treeDemo").css("height", (windowH - 80) + "px");
            $(window).resize(function() { //当浏览器大小变化时
                var windowH = $(window).height();
                if (windowH <= 300) {
                    windowH = 300;
                }
                $("#right").css("height", (windowH - 80) + "px");
                $("#left").css("height", (windowH - 80) + "px");
                $("#treeDemo").css("height", (windowH - 80) + "px");
            });
        });
    </script>
</body>

</html>